<template>
    <div class="login" clearfix>
        <div class="login-wrap">
            <el-row type="flex" justify="center" align="middle" id="row1">
                <el-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>用户登录</span>
                    </div>
                    <el-form ref="loginForm" :model="formData" :rules="rules" status-icon label-width="160px">
                        <el-form-item prop="userPhone" label="电话号码">
                            <el-input v-model="formData.userPhone" placeholder="请输入电话号码" prefix-icon></el-input>
                        </el-form-item>
                        <el-form-item prop="userPWD" label="密码">
                            <el-input v-model="formData.userPWD" show-password placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-row type="flex" justify="end">
                            <el-col :span="4">
                                <el-link type="primary"><router-link to="/undone">找回密码</router-link></el-link>
                            </el-col>
                            <el-col :span="4">
                                <el-link type="primary"><router-link to="/front/register">注册账号</router-link></el-link>
                            </el-col>
                        </el-row>



                        <el-form-item>
                            <el-button type="primary" icon="el-icon-upload" @click="doLogin()">登 录</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-row>
        </div>
    </div>
</template>
   
<script>
import { login } from "@/api/userApi"
import router from '@/router';
const options = {
    data() {
        return {
            formData: {
                userPWD: "123456",
                userPhone: "17395331234",
            },
            rules: {
                userPhone: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 11, max: 11, message: '电话号码格式错误', trigger: 'blur' }
                ],
                userPWD: [
                    { required: true, message: '密码格式错误', trigger: 'blur', min: 6 }
                ]
            }
        };
    },
    created() { },
    methods: {
        doLogin() {
            let that = this;
            if (this.formData.userPhone.trim().length !== 11) {
                console.log(this.formData.userPhone.trim().length);
                this.$message.error("电话号码格式错误");
                return;
            } else if (this.formData.userPWD.trim().length < 6) {
                this.$message.error("请输入6位及以上的密码！");
                return;
            } else {
                //校验用户名和密码是否正确;
                // this.$router.push({ path: "/personal" });
                login(this.formData).then(res => {
                    // console.log("输出response.data.status", res.data.status);
                    if (res.data.code === 1) {
                        //登录成功记录管理员信息
                        localStorage.setItem("user", JSON.stringify(res.data.data));
                        that.$store.commit("setUser", res.data.data);
                        this.$message.success("登陆成功");
                        router.push('/front');
                    } else {
                        alert("您输入的用户名或密码错误！");
                    }
                });
            }
        }
    }
};
export default options;
</script>
   
<style scoped>
.login {
    width: 100%;
    height: 800px;
    background: url("@/assets/images/bg1.jpeg") no-repeat;
    background-size: cover;
    overflow: hidden;
}

.login-warp {
    height: 800px;
}

#row1 {
    height: 800px;
}

.el-link--inner>a {
    text-decoration: none;
    color: #13c9fc;
}

.el-link--inner>a:hover {
    color: #fc13e5;
}

.el-link--inner>a:focus {
    color: #13c9fc;
}
</style>